<!DOCTYPE html>
<html lang="zn">
<head>
<meta charset="UTF-8">
<title>animejs+pixi 2.5D视差demo</title>
<meta name="author" content="www.animejs.cn">
<style>
html {
	height: 100%;
}
body {
	margin: 0;
	height: 100%;
	background:#000;
}
#px-render {
	position: relative;
	width: 100%;
	height: 56.25vw;
	overflow: hidden;
}
#px-render canvas {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(1.05);
}
</style>
</head>

<body>
<div id="px-render"></div>
<script src="./js/pixi.min.js"></script> 
<script src="./js/anime.min.js"></script>
<script>
        var option = {
            width: 1500,
            height: 1000,
            transparent: true,
        }

        var app = new PIXI.Application(option);
        var renderer = app.renderer;
        var preview;
        var displacementSprite;
        var displacementFilter;
        var stage;
        var playground = document.getElementById('px-render');

        function setScene(url) {

            playground.appendChild(renderer.view);

            stage = new PIXI.Container();

            preview = PIXI.Sprite.fromImage(url);

            displacementSprite = PIXI.Sprite.fromImage('./img/sprite.jpg');

            displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;

            displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);

            stage.addChild(preview);

            stage.addChild(displacementSprite);

            app.stage.addChild(stage);
        }


        cmWidth = document.body.clientWidth / 2
        cmHeight = document.body.clientHeight / 2

        var velocity = -0.03;
        move = {
            x: 0,
            y: 0
        };

        document.onmousemove = function (e) {
            anime({targets:move,
                x: e.clientX,
                y: e.clientY,
				duration: 1000,
                easing: 'easeOutSine',
                update: function(anim) {
				  stage.filters = [displacementFilter];
                  displacementFilter.scale.set((move.x - cmWidth) * velocity, (move.y - cmHeight) * velocity * 2);
				}
            });
        }
		
        setScene('./img/photo.jpg');
    </script>
</body>
</html>